import React, { Component } from 'react'
import './index.less'
import MovieItem from './MovieItem'
import { Spin, Alert, Pagination } from 'antd';


export default class MovieList extends Component {

  constructor() {
    super()
    this.state = {
      isLoading: true,
      // 请求的数据
      movies: [],
      // 请求某一页
      page: 1,
      // 每一页的数据
      pageSize: 16,
      // 总条数
      total: 80,
      // 电影的类型
      movieType: 'hot'
    }
  }

  componentDidMount() {
    this.getMovies()
  }

  async componentWillReceiveProps(nextProps) {
    await this.setState({
      movieType: nextProps.history.location.pathname.split('/')[2],
      isLoading: true
    })
    this.getMovies()
  }

  // static getDerivedStateFromProps(nextProps) {
  //   return async () => {
  //     await this.setState({
  //       movieType: nextProps.history.location.pathname.split('/')[2],
  //       isLoading: true
  //     })
  //     console.log(1)
  //     this.getMovies()
  //   }
  // }

  getMovies = async () => {
    const { page, pageSize, movieType } = this.state
    const params = {
      page,
      pageSize
    }
    const { data: { data } } = await this.$http.get(`/movies/${movieType}`, { params })
    this.setState({
      movies: data,
      isLoading: false
    })
  }

  onChange = (pageNumber) => {
    console.log('Page: ', pageNumber);
  }


  render() {
    const { isLoading } = this.state
    return (
      <>
        {
          isLoading
            ?
            <Spin tip="Loading...">
              <Alert
                message="正在加载中"
                description="更多精彩的内容，即将为您呈现！"
                type="info"
              />
            </Spin>
            :
            <div className="overflow-box">
              <div className="movie-list">
                {
                  this.state.movies.map((movie, index) => {
                    return <MovieItem  {...movie} key={index} />
                  })
                }
              </div>
              <div>
                <Pagination showQuickJumper defaultCurrent={2} total={80} onChange={this.onChange} />
              </div>
            </div>
        }
      </>
    )
  }
}
